<template>
  <ContainerGroup>
    <Container height="fill">
      <Button style="margin-bottom: 10px" icon="add" type="plain" @click="handleAdd">新增</Button>
      <div class="wraper">
        <Table
          :columns="tableColumns"
          :loading="tableLoading"
          :data="tableData"
          :pagination="{
            total: total,
            current: currentPage,
            pageSize: pageSize,
          }"
          @paginationChange="pageChange"
        >
          <template #isFile="scope">
            {{scope.row.isFile === 0 ? '否' : '是'}}
          </template>>
          <template #caozuo="scope">
            <Tooltip content="删除" icon="delete" @click="handleDelete(scope.row)" />
          </template>
        </Table>
      </div>
      <!-- 新增、编辑 -->
      <Drawer
        :title="title"
        :visible.sync="showDrawer"
        width="40%"
        :footer-btns="[
          {
            text: '确认',
            type: 'primary',
            loading: qrLoading,
            trigger: 'submit',
          },
          {
            text: '取消',
            type: 'info',
            trigger: 'cancel',
          }
        ]"
        @submit="handleSubmit"
        @cancel="showDrawer = false"
      >
        <el-form
          v-if="showDrawer"
          ref="drawerForm"
          :model="drawerForm"
          :rules="drawerRules"
          label-width="100px"
          size="mini"
          class="demo-drawerForm"
        >
          <el-form-item label="年度：" prop="year">
            <el-input
              v-model.trim="drawerForm.year"
              placeholder="请输入"
              maxlength="20"
              clearable
            />
          </el-form-item>
          <el-form-item label="次数：" prop="times">
            <el-input
              v-model.trim="drawerForm.times"
              placeholder="请输入"
              maxlength="20"
              clearable
            />
          </el-form-item>
          <el-form-item label="名称：" prop="assessmentCycleName">
            <el-input
              v-model.trim="drawerForm.assessmentCycleName"
              placeholder="请输入"
              maxlength="20"
              clearable
            />
          </el-form-item>
          <el-form-item label="开始时间：" prop="startDate">
            <el-date-picker
              v-model="drawerForm.startDate"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="请选择"
              clearable>
            </el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间：" prop="endDate">
            <el-date-picker
              v-model="drawerForm.endDate"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="请选择"
              clearable>
            </el-date-picker>
          </el-form-item>
        </el-form>
      </Drawer>
    </Container>
  </ContainerGroup>
</template>

<script>
import { listAll, saveAssessmentCycle, deleteAssessmentCycleById } from './../../api/assessment'
export default {
  data() {
    return {
      tableColumns: [
        {
          title: '年底',
          dataIndex: 'year'
        },
        {
          title: '次数',
          dataIndex: 'times'
        },
        {
          title: '名称',
          dataIndex: 'assessmentCycleName'
        },
        {
          title: '开始时间',
          dataIndex: 'startDate'
        },
        {
          title: '结束时间',
          dataIndex: 'endDate'
        },
        {
          title: '是否已归档',
          dataIndex: 'isFile',
          type: 'otherTag'
        },
        {
          title: '操作',
          dataIndex: 'caozuo',
          type: 'otherTag'
        }
      ],
      tableData: [],
      tableLoading: false,
      total: 0,
      currentPage: 1,
      pageSize: 100,
      title: '',
      showDrawer: false,
      qrLoading: false,
      drawerForm: {
        year: '',
        times: '',
        assessmentCycleName: '',
        startDate: '',
        endDate: ''
      },
      drawerRules: {
        year: [{ required: true, message: '请输入年度', trigger: 'blur' }],
        times: [{ required: true, message: '请输入次数', trigger: 'blur' }],
        assessmentCycleName: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        startDate: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
        endDate: [{ required: true, message: '请选择结束时间', trigger: 'change' }]
      },
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // 分页
    pageChange(payload) {
      this.currentPage = payload.current
      this.pageSize = payload.pageSize
      this.getdData()
    },
    // 数据
    getData() {
      const param = {
        pageSize: this.pageSize,
        pageNum: this.currentPage
      }
      this.tableLoading = true
      listAll(param).then(res => {
        this.tableLoading = false
        if (res.code === 200) {
          // this.$message.success(res.msg)
          this.tableData = res.data.records
          this.total = res.data.total
        } else {
          this.$message.error(res.msg)
        }
      }).catch(() => {
        this.tableLoading = false
      })
    },
    // 新增
    handleAdd() {
      this.title = '新增考核周期'
      this.$handleSetForm(this.drawerForm, 0);
      this.showDrawer = true
    },
    // 新增--保存
    handleSubmit() {
      this.$refs["drawerForm"].validate((valid) => {
        if (valid) {
          const param = {
            year: this.drawerForm.year,
            times: this.drawerForm.times,
            assessmentCycleName: this.drawerForm.assessmentCycleName,
            startDate: this.drawerForm.startDate,
            endDate: this.drawerForm.endDate
          }
          this.qrLoading = true
          saveAssessmentCycle(param).then(res => {
            this.qrLoading = false
            if (res.code === 200) {
              this.getData()
              this.showDrawer = false
              this.$message.success(res.msg)
            } else {
              this.$message.error(res.msg)
            }
          }).catch(() => {
            this.qrLoading = false
          })
        } else {
          console.log("error submit!!!")
          return false;
        }
      })
    },
    // 撤回
    handleDelete(row) {
      this.$ckConfirm({
        content: '此操作将删除该条记录，并无法恢复，是否继续?',
        title: '提示',
        okFn: (res) => {
          const param = {
            id: row.id
          }
          deleteAssessmentCycleById(param).then((res) => {
            if (res.code === 200) {
              this.currentPage = 1
              this.getData()
              this.$message.success(res.msg)
            } else {
              this.$message.error(res.msg)
            }
          })
        },
        cancelFn: (res) => {
          console.log('取消')
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.wraper {
  display: flex;
  height: calc(100% - 40px);
  overflow: hidden;
  position: relative;
  .upload-demo {
    .buttons {
      margin: 0px 5px;
      height: 27px;
      margin-top: -1px;
    }
  }
}
/deep/.el-dialog-header {
  padding: 10px 10px 0px 10px;
  padding-bottom: 0px;
}
/deep/.el-dialog-title {
  font-size: 15px;
}
/deep/.el-dialog-body {
  padding: 10px;
}
.dialog-inherit {
  display: flex;
  flex-direction: row;
  margin: 10px;
  justify-content:right;
}
.demo-drawerForm {
  /deep/.el-input {
    width: 200px !important;
  }
}
</style>
